<template>
    <div class="bottomStyle" v-show="!resizeStore.isKeyboardOpen">
        <div class="itemStyle">
            <div ref="talkRef" class="imgStyle" @click="clickBottomIcon('talk')"></div>
            <span class="imgWord" @click="clickBottomIcon('talk')" :style="currentItem == 'talk' ? 'color: rgb(113, 158, 255);':''">对话</span>
        </div>
        <div class="itemStyle">
            <div ref="meRef" class="imgStyle" @click="clickBottomIcon('me')"></div>
            <span class="imgWord" @click="clickBottomIcon('me')" :style="currentItem == 'me' ? 'color: rgb(113, 158, 255);':''">我</span>
        </div>
    </div>
</template>
<script setup>
import lottie from "lottie-web";
import { onMounted,ref,reactive, toRaw ,getCurrentInstance } from "vue";
import { useRouter,useRoute } from 'vue-router'
import { useResizeStore } from '@/store/modules/resize'

let resizeStore = useResizeStore()

// let windowHeight = reactive({
//     init : window.innerHeight,
//     current: window.innerHeight,
// })
// const handleDeviceHeightChange = (val)=>{
//     windowHeight.current = val.target.innerHeight
// }
// window.addEventListener('resize', handleDeviceHeightChange);

let router = useRouter()
let route = useRoute()
let currentItem = ref()
let routerTargetMap = reactive({
    talk:'chat',
    me:'user',
    chat:'talk',
    user:'me'
})
let lotMap = reactive({
    talk:'',
    me:''
})
let jsonPath = reactive({
    talkFile: import.meta.globEager('@/assets/lotties/idea.json'),
    meFile: import.meta.globEager('@/assets/lotties/user.json'),
    talkUrl: new URL('@/assets/lotties/idea.json', import.meta.url).href,
    meUrl: new URL('@/assets/lotties/user.json', import.meta.url).href
})
// const talkRef = ref()
// const meRef = ref()
const { proxy } = getCurrentInstance()
onMounted(()=>{
    // console.log(route);
    currentItem.value = routerTargetMap[route.name]
    jsonPath.talkFile = giveCorrectFileName(jsonPath.talkFile)
    jsonPath.meFile = giveCorrectFileName(jsonPath.meFile)
    for(let key in lotMap){
        createLottieImg(key)
    }
})

const giveCorrectFileName = (obj)=>{
    for(let key in obj){
        return obj[key]
    }
}
const createLottieImg = (val)=>{
    if(lotMap[val] != null && lotMap[val] != ''){
        lotMap[val].destroy()
    }
    lotMap[val] = lottie.loadAnimation({
        container: proxy.$refs[`${val}Ref`], //渲染动画所需容器
        // container: talkRef.value, //渲染动画所需容器
        renderer: "svg",//动画渲染类型，svg/canvas/html
        loop: false,//是否循环播放，布尔值
        autoplay: false,//是否自动播放，布尔值
        path: jsonPath[`${val}Url`] // the path to the animation json
    })
    lotMap[val].goToAndStop( jsonPath[`${val}File`]['op'] - 1 ,true)//初始化
}
const clickBottomIcon = (target)=>{
    // lotMap.talk.setSpeed(1)
    // lotMap.talk.play()
    // lotMap.talk.loop = true
    lotMap[target].goToAndPlay(0)
    currentItem.value = target
    router.push({name:routerTargetMap[target]})
}
</script>
<style scoped lang="scss">
.bottomStyle{
    // position: absolute;
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgb(219, 219, 219);
    background-color: rgb(252, 252, 252);
    .itemStyle{
        width: 100%;
        text-align: center;
        .imgStyle{
            height: 35px;
            width: 35px;
            margin-left: 50%;
            transform: translateX(-50%);
            padding-left: 10px;
            padding-right: 10px;
        }
        .imgWord{
            position: absolute;
            transform: translateX(-50%);
            font-size: 13px;
            bottom: 0;
            transition: color .15s ease-out;
        }
    }
}
</style>